<template>
  <svg class="svg-icon" role="img" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
import { computed } from 'vue';
export default {
  props: ['name'],
  setup(props) {
    let iconName = computed(() => `#icon-` + props.name);
    return {
      iconName
    };
  }
};
</script>

<style type="text/css">
.svg-icon:focus {
  outline: none;
}
</style>
